<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>工单完整详情</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" href="styles.css">
		<style>
			#mb-3 {
				position: absolute;
				left: 1200px;
				top: 50px;
			}
		</style>
	</head>

	<body>
		<!-- 头部导航栏 -->
		<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
			<div class="container">
				<a class="navbar-brand" href="#">
					<img src="../img/logo.png" alt="logo" width="40" height="40" class="d-inline-block align-text-top">
					综合管理平台
				</a>
				<div class="d-flex">
					<button class="btn btn-light me-2" type="button">
						<img src="search-icon.png" alt="search" width="20" height="20">
					</button>
					<button class="btn btn-light me-2" type="button">
						<img src="message-icon.png" alt="message" width="20" height="20">
					</button>
					<span class="navbar-text">张三</span>
				</div>
			</div>
		</nav>

		<!-- 侧边栏 -->
		<div class="container-fluid">
			<div class="row">
				<nav id="sidebar" class="col-md-2 col-lg-2 d-md-block bg-light sidebar">
					<div class="position-sticky">
						<ul class="nav flex-column">
							<li class="nav-item">
								<a class="nav-link" href="#">
									<img src="service-icon.png" alt="service" width="20" height="20" class="me-2">服务管理
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link active" aria-current="page" href="#">
									<img src="workorder-icon.png" alt="workorder" width="20" height="20"
										class="me-2">工单管理
								</a>
							</li>
						</ul>
					</div>
				</nav>

				<!-- 主内容区域 -->
				<main class="col-md-10 col-lg-10">
					<div class="card">
						<div class="card-body">
							<!-- 工单基本信息 -->
							<div class="mb-3">
								<input type="hidden" id="uid" />
								<input type="hidden" id="wid" />
								<label for="woNumber" class="form-label">工单编号：</label>
								<span id="woNumber">AA2222222</span>
							</div>
							<div class="mb-3">
								<h4 class="mb-2">工单信息</h4>
								<div class="row">
									<div class="col-md-6">
										<label for="contactNameDetail" class="form-label">联系人：</label>
										<span id="contactNameDetail">王文州</span>
									</div>
									<div class="col-md-6">
										<label for="contactPhoneDetail" class="form-label">联系电话：</label>
										<span id="contactPhoneDetail">13588888888</span>
									</div>
								</div>
								<div class="row">
									<div class="col-md-6">
										<label for="faultLocationDetail" class="form-label">故障位置：</label>
										<span id="faultLocationDetail">海鲜区D-6-34铺</span>
									</div>
									<div class="col-md-6">
										<label for="faultReasonDetail" class="form-label">故障原因：</label>
										<span id="faultReasonDetail">门锁坏了无法关上</span>
									</div>
								</div>
								<div class="row">
									<div class="col-md-6">
										<label for="faultImagesDetail" class="form-label">故障图片：</label>
										<div class="d-inline-block me-2">
											<img src="" alt="faultImage1" width="80" height="80">
											<img src="" alt="faultImage2" width="80" height="80">
											<img src="" alt="faultImage3" width="80" height="80">
										</div>
									</div>
									<div class="col-md-6">
										<label for="repairDateDetail" class="form-label">维修日期：</label>
										<span id="repairDateDetail">2024-07-01</span>
									</div>
								</div>
							</div>
							<div class="mb-3 border-top pt-3">
								<h6 class="mb-2">工单信息</h6>
								<div class="row">
									<div class="col-md-6">
										<label for="contactNameDetail" class="form-label">维修人员：</label>
										<span id="wname">王大仙</span>
									</div>
									<div class="col-md-6">
										<label for="contactPhoneDetail" class="form-label">联系电话：</label>
										<span id="wphone">13588888888</span>
									</div>
								</div>
							</div>

							<!-- 费用清单 -->
							<div class="mb-3 border-top pt-3">
								<h6 class="mb-2">费用清单</h6>
								<table class="table table-bordered">
									<thead>
										<tr>
											<th>项目名称</th>
											<th>服务单位</th>
											<th>服务单价（元）</th>
											<th>数量</th>
											<th>费用合计</th>
										</tr>
									</thead>
									<tbody id="_tbody">

									</tbody>
									<tfoot>
										<tr id="_tr">
											<td colspan="4">总计：</td>

										</tr>
									</tfoot>
								</table>
							</div>

							<!-- 审核进度 -->
							<div class="mb-3 border-top pt-3">
								<h6 class="mb-2">审核进度</h6>
								<div class="progress">
									<div class="progress-bar progress-bar-striped progress-bar-animated"
										role="progressbar" style="width: 100%;" aria-valuenow="75" aria-valuemin="0"
										aria-valuemax="100"></div>
								</div>
								<div class="row">
									<div class="col">
										<p>发起人</p>
										<p id="wwname">王文州 <span class="text-muted">发起</span></p>
										<p class="text-muted" id="enddate">2024-6-24 10:22</p>
									</div>

									<div class="col">
										<p>主管审批</p>
										<p>冯总 <span class="text-warning">审核通过</span></p>
									</div>
									<div class="col">
										<p>完成</p>
									</div>
								</div>
							</div>
							<!-- 用户评价 -->
							<div class="mb-3 border-top pt-3">
								<h6 class="mb-2">用户评价</h6>
								<div class="row">
									<!-- <div class="col">
										<p>维修速度</p>
										<span class="star-rating">
											<i class="bi bi-star-fill"></i>
											<i class="bi bi-star-fill"></i>
											<i class="bi bi-star-fill"></i>
											<i class="bi bi-star"></i>
											<i class="bi bi-star"></i>
										</span>
									</div>
									<div class="col">
										<p>服务态度</p>
										<span class="star-rating">
											<i class="bi bi-star-fill"></i>
											<i class="bi bi-star-fill"></i>
											<i class="bi bi-star-fill"></i>
											<i class="bi bi-star"></i>
											<i class="bi bi-star"></i>
										</span>
									</div>
									<div class="col">
										<p>师傅评价</p>
										<span class="star-rating">
											<i class="bi bi-star-fill"></i>
											<i class="bi bi-star-fill"></i>
											<i class="bi bi-star-fill"></i>
											<i class="bi bi-star"></i>
											<i class="bi bi-star"></i>
										</span>
									</div> -->
									<div class="col">
										<p id="pj"></p>
									</div>
								</div>
								<div class="mb-3">
									<label for="evaluationImages" class="form-label">评价图片：</label>
									<div class="d-inline-block me-2">
										<img src="placeholder-img.png" alt="evaluationImage1" width="80" height="80">
										<input type="checkbox">
									</div>

								</div>
							</div>

							<!-- 操作按钮 -->
							<div class="d-flex justify-content-center mt-3">
								<button type="button" class="btn btn-primary" id="approveBtn">返回工单</button>
							</div>
						</div>
					</div>
				</main>
			</div>
		</div>

		<script src="../js/jquery.min.js"></script>

		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/content.min.js?v=1.0.0"></script>
		<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
		<script src="../js/request/base.js"></script>
		<script src="../js/script/yiwancheng.js"></script>
	</body>

</html>